import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import TextInput from 'rax-textinput';


function Uiwindow() {

    //9.1确认框
    const [title,setTitle] = useState('');
    const [msg,setMsg] = useState('');
    const [label,setLabel] = useState('');

    //9.2提示框
    const [reTitle,setReTitle] = useState('');
    const [reMsg,setReMsg] = useState('');
    const [buttonName,setButtonName] = useState('');

    //9.3弱提示
    const [weakReMsg,setWeakReMsg] = useState('');
    const [duration,setDuration] = useState('');

    //9.4文本输入框
    const [inputMsg,setInputMsg] = useState('');
    const [inputTitle,setInputTitle] = useState('');
    const [inputPlaceholder,setInputHolder] = useState('');
    const [inputType,setInputType] = useState('');
    const [cancelButton,setCancelButton] = useState('');
    const [confirmButton,setConfirmButton] = useState('');

    //9.5单选列表
    const [radioTitle,setRadioTitle] = useState('');
    const [radioOtherButton,setRadioOtherButton] = useState('');
    const [radiocancelButton,setRadioCancelButton] = useState('');

    //9.6等待蒙版显示
    const [preText,setPreText] = useState('');
    const [preIcon,setPreIcon] = useState(Boolean);

    //9.9分享
    const [shareTitle,setShareTitle] = useState('');
    const [shareContent,setShareContent] = useState('');
    const [shareImage,setShareImage] = useState('');
    const [shareUrl,setShareUrl] = useState('');

    // 9.10直接分享
    const [dirShareChannel,setDirShareChannel] = useState('');
    const [dirShareTitle,setDirShareTitle] = useState('');
    const [dirShareContent,setDirShareContent] = useState('');
    const [dirShareImg,setDirShareImg] = useState('');
    const [dirShareUrl,setDirShareUrl] = useState('');


    //初始化jsbirdge
    const excuteBridge = () => {
      
        ZWJSBridge.onReady(() => { 
          console.log('初始化完成后，执行bridge方法');
        })
      }

 
      //9.1添加确认框
      const addConfirm = () =>{
          excuteBridge();
         
          var buttonLabels = label.split(',');

          console.log('**** begin addConfirm() **** title:   ' + title + 'msg:   ' + msg + '   buttonLabels:   ' + buttonLabels);
          ZWJSBridge.confirm({
            title: title,
            message: msg, 
            buttonLabels: buttonLabels
        })
            .then((data) => {
                var dataMsg = JSON.stringify(data);

                console.log('####  ZWJSBridge.confirm() log. data:   ' + dataMsg);
            
            }).catch((error) => {
                 console.log('####  ZWJSBridge.confirm() error:    ' + error);
            });

            console.log('**** exit addConfirm() ****');

      }

      //9.2添加提示框
      const addRemid = () =>{
         excuteBridge();
         console.log('**** begin addRemind() **** reTitle:   ' + reTitle + '  reMsg:   ' + reMsg + '  buttonName:  ' + buttonName);

         ZWJSBridge.alert({
            title: reTitle,
            message: reMsg, 
            buttonName: buttonName
        })
            .then((result) => { 
                var dataMsg = JSON.stringify(result);

                console.log('####  ZWJSBridge.alert() log. data:   ' + dataMsg);
            }).catch((error) => {

                 console.log('#### ZWJSBridge.alert() error.   ' + error);
            });
          
            console.log('**** exit addRemind() ****');
      }

      //9.3 添加弱提示
      const addweakRemind = () =>{
          excuteBridge();
          console.log('**** begin addweakRemind() weakReMsg:   ' + weakReMsg + '   duration:   ' + duration);
          var numberDur = parseInt(duration);

          ZWJSBridge.toast({ 
              message: weakReMsg, 
              duration: numberDur
            }).then((result) => { 
                console.log('#### ZWJSBridge.toast() log.result:   ' + result);
            }).catch((error) => { 
                console.log('#### ZWJSBridge.toast() error:  ' + error);
            });
          console.log('**** exit addweakRemind() .')
      }

      //9.4 文本输入框
      const addInput = () =>{
          excuteBridge();
          console.log('**** begin addInput() inputMsg:   ' + inputMsg + '  inputTitle:   ' + inputTitle + '  inputPlaceholder:  ' + inputPlaceholder + 
          'inputType:   ' + inputType + '  confirmButton:   ' + confirmButton + '  cancelButton:   ' + cancelButton);

          ZWJSBridge.prompt({
            title: inputTitle, 
            placeholder: inputPlaceholder, 
            message: inputMsg, 
            inputType: inputType, 
            cancelButton: cancelButton, 
            confirmButton: confirmButton
            }).then((data) => {
                var dataMsg = JSON.stringify(data);
                console.log('#### ZWJSBridge.prompt() log.data:  ' + dataMsg)
            }).catch((error) => { 
                console.log('#### ZWJSBridge.prompt() error:   ' + error);
            });

            console.log('**** exit addInput() ');

      }

      //9.5 单选列表
      const addRadio = () => {
          excuteBridge();
          console.log('**** begin addRadio() radioTitle:   ' + radioTitle + '  radioOtherButton:   ' + radioOtherButton + '  radiocancelButton:   ' + radiocancelButton);
          
          var buttons = radioOtherButton.split(",");
          ZWJSBridge.actionSheet({
            title: radioTitle,
            cancelButton: radiocancelButton,
            otherButtons: buttons
            }).then((data) => {
                var dataMsg = JSON.stringify(data);
              console.log('#### ZWJSBridge.actionSheet() log.data:   ' + dataMsg);
            }).catch((error) => {

                 console.log('#### ZWJSBridge.actionSheet() error:   ' + error);
            });

            console.log('**** exit addRadio().');
      }

      //9.6 等待蒙版显示
      const addPre = () => {
          excuteBridge();
          console.log('**** begin addPre() preText:   ' + preText + 'preIcon:   ' + preIcon);
          ZWJSBridge.showPreloader({ 
              text: preText, 
              showIcon: preIcon
            }).then((result) => { 

                console.log('#### ZWJSBridge.showPreloader() log. result:   ' + result);
            }).catch((error) => { 
                console.log('#### ZWJSBridge.showPreloader() error:   ' + error);
            });

            console.log('**** exit addPre() ');
      }

      //9.7 等待蒙版隐藏
      const hidePre = () => {
          excuteBridge();
          console.log('**** begin hidePre() ');

          ZWJSBridge.hidePreloader().then((result) => { 
              console.log('#### ZWJSBridge.hidePreloader() log.result: ' + result);
          }).catch((error) => { 
              console.log('#### ZWJSBridge.hidePreloader() error: ' + error);
          });

          console.log('**** exit hidePre()');
      }

      // 9.8 选择城市
      const selectCity = () => {
          excuteBridge();

          console.log('**** begin selectCity()');
          ZWJSBridge.selectCity() .then((data) => {
            
            console.log('#### ZWJSBridge.selectCity() log.'); 
            alert ('城市名称为: ' +  data.cityName);
            }).catch((error) => {

            console.log('#### ZWJSBridge.selectCity() error' + error); 
        });

        console.log('**** exit selectCity()');
      }

      //9.9分享
      const shareSome = () => {
          excuteBridge();

          console.log('**** begin shareSome() title:  ' + shareTitle + '  content:  ' + shareContent + '  image:  ' + shareImage + '  url:' + shareUrl);

          ZWJSBridge.share({
            'title':shareTitle,
            'content':shareContent, 
            'image':shareImage, 
            'url':shareUrl
            }).then((result) => { 

                console.log('#### ZWJSBridge.share() log. result:   ' + result);
            }).catch((error) => { 
                console.log('#### ZWJSBridge.share() error:   ' + error);
            });

            console.log('**** exit shareSome()');
      }

      // 9.10
      const DirShare = () => {
          excuteBridge();

          console.log('**** begin DirShare()  channel: ' + dirShareChannel + '  title:  ' + dirShareTitle + ' content:  '  + dirShareContent + 
          '  image:  ' + dirShareImg + ' url:  ' + dirShareUrl);

          ZWJSBridge.directShare({
            'channel': dirShareChannel,
            'title':dirShareTitle,
            'content': dirShareContent, 
            'image': dirShareImg, 
            'url':dirShareUrl
            }).then((result) => { 
                console.log('#### ZWJSBridge.directShare() log. result:   ' + result);
            }).catch((error) => {
                 console.log('#### ZWJSBridge.directShare() error:   ' + error);
            });

            console.log('exit DirShare() ');
      }


    
  return (
    <View>
       <div>
           <h1 style={{textAlign:'center',color:'white'}}>9.欢迎来到UI窗口页面</h1>
           <div>
               <h2>9.1  添加确认框</h2>
               <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入确认框的title:</h5>
                   <TextInput value={title}
                              onChangeText={text => setTitle(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入确认框的信息:</h5>
                   <TextInput value={msg}
                              onChangeText={text => setMsg(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入确认框的按钮:</h5>
                   <TextInput value={label}
                              onChangeText={text => setLabel(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick={() => addConfirm()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >添加组件</button>
           </div>

           <div>
               <h2>9.2  提示框</h2>
               <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入提示框的title:</h5>
                   <TextInput value={reTitle}
                              onChangeText={text => setReTitle(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入提示框的信息:</h5>
                   <TextInput value={reMsg}
                              onChangeText={text => setReMsg(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入提示框的按钮名称:</h5>
                   <TextInput value={buttonName}
                              onChangeText={text => setButtonName(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick={() => addRemid()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >添加组件</button>
           </div>

           <div>
               <h2>9.3  弱提示</h2>
               <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入要展示的提示信息:</h5>
                   <TextInput value={weakReMsg}
                              onChangeText={text => setWeakReMsg(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入提示持续时间(毫秒):</h5>
                   <TextInput value={duration}
                              onChangeText={text => setDuration(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick={() => addweakRemind()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >添加组件</button>
           </div>

           <div>
               <h2>9.4  文本输入框</h2>
               <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入文本输入框的信息:</h5>
                   <TextInput value={inputMsg}
                              onChangeText={text => setInputMsg(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入文本输入框的标题:</h5>
                   <TextInput value={inputTitle}
                              onChangeText={text => setInputTitle(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入文本输入框的占位符:</h5>
                   <TextInput value={inputPlaceholder}
                              onChangeText={text => setInputHolder(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请选择文本输入框的输入类型:</h5>
                   <span>
                        <button onClick={() => setInputType('text')}>文字输入框</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setInputType('number')}>数字输入框</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setInputType('password')}>密码输入框</button>
                    </span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入文本输入框的取消按钮名称:</h5>
                   <TextInput value={cancelButton}
                              onChangeText={text => setCancelButton(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入文本输入框的确定按钮名称:</h5>
                   <TextInput value={confirmButton}
                              onChangeText={text => setConfirmButton(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>

                <button onClick={() => addInput()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >添加组件</button>
           </div>
            
            <div>
                <h2>9.5  单选列表</h2>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入单选列表的标题:</h5>
                   <TextInput value={radioTitle}
                              onChangeText={text => setRadioTitle(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入单选列表的其他按钮名称:</h5>
                   <TextInput value={radioOtherButton}
                              onChangeText={text => setRadioOtherButton(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入单选列表取消按钮名称:</h5>
                   <TextInput value={radiocancelButton}
                              onChangeText={text => setRadioCancelButton(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>

                <button onClick={() => addRadio()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >添加组件</button>
            </div>

            <div>
                <h2>9.6  等待蒙版显示</h2>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入蒙版显示的文字:</h5>
                   <TextInput value={preText}
                              onChangeText={text => setPreText(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请选择是否显示蒙版按钮:</h5>
                   <span>
                        <button onClick={() => setPreIcon(true)}>是</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setPreIcon(false)}>否</button>
                    </span>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>

                <button onClick={() => addPre()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >添加组件</button>
            </div>

            <div>
                <h2>9.7  等待蒙版隐藏</h2>
                <button onClick={() => hidePre()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >隐藏蒙版</button>  
            </div>
            
            <div>
                <h2>9.8  选择城市</h2>
                <button onClick={() => selectCity()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >获取城市名称</button> 
            </div>

            <div>
                <h2>9.9  分享</h2>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入分享标题:</h5>
                   <TextInput value={shareTitle}
                              onChangeText={text => setShareTitle(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入分享内容:</h5>
                   <TextInput value={shareContent}
                              onChangeText={text => setShareContent(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入分享图片的路径:</h5>
                   <TextInput value={shareImage}
                              onChangeText={text => setShareImage(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入分享链接:</h5>
                   <TextInput value={shareUrl}
                              onChangeText={text => setShareUrl(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick={() => shareSome()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >分  享</button>
            </div>

            <div>
                <h2>9.10  直接分享</h2>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请选择分享通道:</h5>
                   <span>
                        <button onClick={() => setDirShareChannel('wechat')}>微信好友</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setDirShareChannel('wechat _moments')}>微信朋友圈</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setDirShareChannel('weibo')}>微博</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setDirShareChannel('dingtalk')}>钉钉</button>
                    </span>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入分享标题:</h5>
                   <TextInput value={dirShareTitle}
                              onChangeText={text => setDirShareTitle(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入分享内容:</h5>
                   <TextInput value={dirShareContent}
                              onChangeText={text => setDirShareContent(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入分享图片的路径:</h5>
                   <TextInput value={dirShareImg}
                              onChangeText={text => setDirShareImg(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入分享链接:</h5>
                   <TextInput value={dirShareUrl}
                              onChangeText={text => setDirShareUrl(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick={() => DirShare()}
                        style={{
                            width: 160,
                            height: 40,
                            backgroundColor: 'grey',
                            color: 'white',
                            fontSize: 8
                        }}  
                >直接分享</button>
            </div>

       </div>
      
    </View>
  );
}

export default Uiwindow;
